<template>
  <div class="roof">
    <div class="nav-item">
      <!-- {{ NavInfoJoinRoof.navInfo }} -->
    </div>
    <div class="title">
      <div class="weather">
        {{ weatherInfo.city }}今日{{ weatherInfo.wea }}温度{{
          weatherInfo.tem
        }}度
      </div>
    </div>
  </div>
</template>

<script setup>
// import { useNavInfoJoinRoofService } from "@/stores/NavInfoJoinRoof";
import axios from "axios";
import { onMounted, ref } from "vue";

// const NavInfoJoinRoof = useNavInfoJoinRoofService();
// NavInfoJoinRoof.$subscribe((state) => {});

// 天气对象
const weatherInfo = ref({});
// 获取天气
const getWeatherNow = () => {
  const appid = 14781326;
  const appsecret = "0Q3QPJcq";
  const cityid = 101220101;
  let weatherUrl =
    "http://v1.yiketianqi.com/free/day?appid=" +
    appid +
    "&appsecret=" +
    appsecret +
    "&cityid=" +
    cityid;
  axios.get(weatherUrl).then((wea) => {
    // console.log(wea.data);
    weatherInfo.value = wea.data;
  });
};
onMounted(() => {
  getWeatherNow();
});
</script>

<style lang="scss" scoped>
.roof {
  width: 100%;
  height: 60px;
  background-color: #fff;
  border-radius: 12px 12px 0px 0px;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.03);
  border-bottom: 0.5px solid #f3f4f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;

  @media (max-width: 768px) {
    margin-top: 24px;
    height: auto;
    padding: 12px;
    flex-direction: column;
    gap: 8px;

    .left,
    .right {
      width: 100%;
    }

    .left {
      font-size: 14px;
    }

    .right {
      justify-content: flex-start;
      overflow-x: auto;
      padding-bottom: 4px;

      &::-webkit-scrollbar {
        height: 4px;
      }

      &::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.1);
        border-radius: 2px;
      }
    }
  }

  .nav-item {
    font-size: 18px;
    font-weight: 700;
  }

  .title {
    width: auto;
    text-align: center;
    margin: 0 auto;
    letter-spacing: 3px;
    color: rgba(44, 159, 236, 0.7);
    font-weight: 700;
  }
}
</style>